<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<c:url value="/team/new.html" var="createTeam"/>
<c:url value="/resources/jQuery/jquery-1.7.2.min.js" var="jquery"/>
<c:url value="/resources/jQuery/jquery-ui-1.8.21.custom.min.js" var="jqueryUI"/>
<c:url value="/resources/css/cupertino/jquery-ui-1.8.21.custom.css" var="jQueryCSS" />


<script type="text/javascript" src="${jquery}" ></script>
<script type="text/javascript" src="${jqueryUI}" ></script>
<link type="text/css" href="${jQueryCSS}" rel="Stylesheet" />


<script type="text/javascript">

    function showForm(id) {
	  $("#gameForm_" + id).dialog({
         title: "Complete the Game",                
         width: "auto",
         height: "auto",
         modal: true,
         resizable: false
		});
    }

	 $(document).ready(function(){
		 $( "#tabs" ).tabs({
			 event: "click",
			 collapsible: "false"
		 });
		 $("#tabs").show();	 
		 
		 $("#createTeamButton").button();
		 $("#createTeamButton").click(function() {
			$("#createTeamForm").dialog({
		            title: "Create a Team",                
			            width: "auto",
			            height: "auto",
			            modal: true,
			            resizable: false
					});
			return false;
		 });
		 
		 $(".completeGameButton").button().css({'width': '60px', 'height': '20px', 'padding-left': '8px'});
// 		 $(".completeGameButton").click(function() {
// 			$(this).dialog({
// 		            title: "Complete the Game",                
// 			            width: "auto",
// 			            height: "auto",
// 			            modal: true,
// 			            resizable: false
// 					});
// 			return false;
// 		 });
		 
		 $("#createGameButton").button();
		 $("#createGameButton").click(function() {
			$("#createGameForm").dialog({
		            title: "Create a Game",                
			            width: "auto",
			            height: "auto",
			            modal: true,
			            resizable: false
					});
			return false;
		 });
		 
	 });
</script>

<style>
body {
  background-color: #B6BCFA;
}

table {
  border-style: solid;
  border-width: 2px;
  border-color: #B6BCFA;
  width: 95%;
}

table td {
  text-align: center;
}

tr {
  padding: 0px;
  height: 20px;
}


tr.odd {
  background-color: #B6BCFA;
}

tr.odd td {
  padding:0;
}

.ui-button-text-only .ui-button-text {
   font-size: .8em !important;
   padding: 0em 0em;
}
</style>

<html>
  <body>
   <jsp:include page="templates/header.jsp"></jsp:include>
    <h4 style="margin-top: 0px;">League page for ${league.leagueName}</h4>
    
    <div id="tabs" style="display:none" >
      <ul>
		<li><a href="#tabs-1">Teams</a></li>
		<li><a href="#tabs-2">Schedule</a></li>
	  </ul>
	  <div id="tabs-1">
	  <table>
        <tbody>
        <tr><th>Team Name</th><th>Coach</th></tr>
        <c:forEach items="${teamViews}" var="team" varStatus="loop">
	      <c:choose>
	      <c:when test="${loop.index % 2 eq 0}">
	      <tr class="odd">
	      </c:when>
	      <c:otherwise>
	      <tr>
	      </c:otherwise>
	      </c:choose>
	      <td><a href="<c:url value='/team/view.html?name=${team.team.encodedName}' />" >${team.team.name}</a></td><td>${team.coach.fullName}</td></tr>
        </c:forEach>
        </tbody>
      </table>
    <sec:authorize access="hasAnyRole('Admin','Coach')">
    <br />
    <div id="createTeamButton" >Add a Team</div>
    <jsp:include page="forms/createTeam.jsp"></jsp:include>
    </sec:authorize>
	  </div>
	  <div id="tabs-2">
	  <table>
        <tbody>
        <tr><th>Home Team</th><th>Away Team</th><th>Location</th><th>Date</th><th>Score</th></tr>
        <c:forEach items="${games}" var="game" varStatus="loop">
	      <c:choose>
	      <c:when test="${loop.index % 2 eq 0}">
	      <tr class="odd">     
	      </c:when>
	      <c:otherwise>
	      <tr>
	      </c:otherwise>
	      </c:choose>
	      <td>${game.homeTeam.name}</td><td>${game.awayTeam.name}</td><td>${game.location.fullAddress}</td>
	      <td>${game.game.gameDate} ${game.game.gameTime}</td><td>${game.game.homeScore} - ${game.game.awayScore} <a class="completeGameButton" onClick="showForm(${game.game.gameID})">Record</a><div id="gameForm_${game.game.gameID}" class="completeGameForm" style="display:none">
         <form:form  method="post" commandName="commandGame" action="../game/completeGame.html?id=${game.game.gameID}&league=${league.encodedName}">
          <h5>${game.awayTeam.name} @ ${game.homeTeam.name}</h5>
        <table>
       <tr>
           <td><form:label path="homeScore">Home Score</form:label></td>
          <td><form:input path="homeScore" /></td>
       </tr>
        <tr>
           <td><form:label path="awayScore">Away Score</form:label></td>
           <td><form:input path="awayScore" /></td>
         </tr>
         <tr>
          <td colspan="2">
             <input type="submit" value="Complete Game"/>
          </td>
          </tr>
          </table>      
          </form:form></div></td></tr>
        </c:forEach>
        </tbody>
      </table>
    <sec:authorize access="hasRole('Admin')">
    <br/>
      <div id="createGameButton" >Add a game</div>
      <jsp:include page="forms/createGame.jsp"></jsp:include>
    </sec:authorize>
	  </div>
    </div>
  </body>
</html>